<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2022-10-20 10:12:53
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2022-10-26 13:24:29
 * @FilePath: \nonogram\src\pages\Footer.vue
 * @Description: 
 -->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Nonogram from "@/components/nonogram/nonogram.vue";
const explain = `旁边的数字表示对应的横排或竖排中\n有几个相邻的格子\n将这些格子全部正确地涂出来\n就会看到谜底居然是......!`,
  tips = "这是个解开了谜底的例题",
  bigTitle = "游戏玩法",
  lit1 = "数织",
  lit2 = "Nonogram";
const footer = ref<HTMLDivElement>();
const view = ref(0);


onMounted(() => {
  view.value = footer.value!.offsetWidth;
});
</script>

<template>
  <div class="footer" ref="footer">
    <div class="f-center">
      <div class="f-left">
        <div class="title">
          <div class="title-big">
            <template v-for="(row, index) in bigTitle" :key="index">
              <div class="big" :style="{ top: `${index % 2 ? 8 : 0}px` }">
                {{ row }}
              </div>
            </template>
          </div>

          <div class="title-lits">
            <div class="lit">{{ lit1 }}</div>
            <div class="lit">{{ lit2 }}</div>
          </div>
        </div>
        <div class="text">{{ explain }}</div>
      </div>
      <div v-if="view >= 500" class="f-right">
        <Nonogram :select="false" :width="195" :level="1">
          <template v-slot:Bottom>
            <span class="bottomText">{{ tips }}</span>
          </template>
        </Nonogram>
      </div>
    </div>
    <div class="my"></div>
  </div>
</template>

<style scoped lang="less">
.foorerBColor {
  height: 250px;
  width: 100%;
  background-color: white;
  position: absolute;
  top: 0;
}
.footer {
  width: 100%;
  height: 200px;
  min-height: 200px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: hidden;
  position: relative;

  .f-center {
    height: 100%;
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    z-index: 2;
    .f-left {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 300px;

      .title {
        height: 35%;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        user-select: none;
        color: Olive;
        .title-big {
          display: flex;
          font-size: 56px;
          text-shadow: 5px 5px rgba(128, 128, 0, 0.4);
          height: 100%;
          .big {
            position: relative;
          }
        }

        .title-lits {
          width: 30px;
          display: flex;
          flex-direction: row;
          height: 100%;

          .lit {
            writing-mode: vertical-rl;
            text-align: left;
            font-size: 10px;
            padding-top: 3px;
          }
        }
      }

      .text {
        color: rgb(40, 40, 40);
        text-align: left;
        white-space: pre-wrap;
        text-decoration: underline Olive 2px;
        line-height: 18px;
      }
    }

    .f-right {
      width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;

      .bottomText {
        width: 100%;
        color: Olive;
        white-space: nowrap;
        padding-top: 6px;
        font-size: 10px;
      }
    }
  }
}
</style>
